<template>
  <zm-dialog
    title="选择销售单导出类型"
    :visible.sync="value"
    append-to-body
    :before-close="dialogClose"
    :close-on-click-modal="false"
    size="small"
    class="select-export-style"
  >
    <div class="pd20">
      <el-radio-group v-model="type" size="small" class="db select-type">
        <div class="db" v-for="(item, index) in typeList" :key="index">
          <el-radio :label="item.value" class="df-center mb20" v-if="+params.checkStatus === 1 ? index < 1 : true">
            <div class="type-item df-center">
              <div class="flex-one">
                <div class="fs20">{{ item.label }}</div>
              </div>
            </div>
          </el-radio>
        </div>
      </el-radio-group>
    </div>
    <div slot="footer" class="tr">
      <el-button @click="dialogClose">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
      <zm-export
        ref="export"
        :api="exportApi"
        type="warning"
        :params="exportForm"
        v-show="false"
        @after-export="dialogClose"
      ></zm-export>
    </div>
    <export-fields
      v-if="exportParams.visible"
      v-model="exportParams.visible"
      :api="exportGetApi"
      @after="onExport"
      @isAllClose="isAllClose"
      type="4"
    ></export-fields>
  </zm-dialog>
</template>

<script>
import dialogMixin from '@/mixins/dialogMixin'
import ExportFields from '@/components/exportFields'
import saleOrderApi from '@/api/src/saleOrder'

import returnedMoneyApi from '@/api/src/returnedMoney'

import invoiceApi from '@/api/src/invoice'

export default {
  components: { ExportFields },
  mixins: [dialogMixin],
  props: {
    params: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      type: '1',

      exportParams: {
        visible: false
      },
      exportForm: {},
      mainList: []
    }
  },
  computed: {
    exportGetApi () {
      console.log(this.type, '--------------------')
      return ['1', '2'].includes(this.type)
        ? saleOrderApi.getExportField
        : this.type === '3' ? returnedMoneyApi.exportField : invoiceApi.exportField
    },
    exportApi () {
      return ['1', '2'].includes(this.type)
        ? saleOrderApi.exportOrder
        : this.type === '3' ? returnedMoneyApi.exportList : invoiceApi.exportInvoice
    },
    orderId () {
      return this.params.orderId
    },
    typeList () {
      return [
        {
          label: `导出${this.orderId ? '所选' : '全部'}销售单`,
          value: '1'
        },
        {
          label: '导出包含退货记录的销售单',
          value: '2'
        },
        {
          label: '导出回款列表信息',
          value: '3'
        },
        {
          label: '导出发票列表信息',
          value: '4'
        }
      ]
    }
  },
  created () {},
  methods: {
    async submit () {
      // 导出接口
      this.exportParams.visible = true
      // this.dialogClose()
    },
    async onExport (fields) {
      let operatorId = this.params.dataType === '1' ? '' : this.params.operatorId.join(',')
      this.exportForm = {
        ...this.params,
        operatorId,
        type: this.type,
        fields: fields
      }
      this.$refs.export.onExport()
      // const _res = await saleOrderApi.getExportField({ type: this.type });
      // this.mainList = [
      //   {
      //     vals: [],
      //     list: _res,
      //     options: { ...this.checkboxOptions, allKey: "全部选中" }
      //   }
      // ];
      // this.exportParams.visible = true;
    },
    isAllClose () {
      if (+this.params.checkStatus === 1) {
        this.dialogClose()
      }
    }
  }
}
</script>
<style lang="scss">
.select-export-style {
  .select-type {
    .el-radio__label {
      flex: 1;
    }
    .type-icon {
      font-size: 40px;
    }
  }
  .type-item {
    width: 600px;
    padding: 20px;
    border: 1px solid #dedede;
  }
}
</style>
